<template>
  <div>
    <BreadCrumbs name1="用户管理" name2="用户列表" name3="用户详情"></BreadCrumbs>
    <el-button type="text" @click="$router.go(-1)">返回</el-button>
    <el-divider></el-divider>
    <el-descriptions title="基础信息" :column="1">
      <el-descriptions-item label="用户手机号">{{ detail.phone }}</el-descriptions-item>
      <el-descriptions-item label="用户性别">{{
        detail.gender === 1 ? '男' : detail.gender === 2 ? '女' : '未知'
      }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{ detail.nick_name }}</el-descriptions-item>
      <el-descriptions-item label="合并症">
        <el-tag
          style="margin-right: 6px"
          type="info"
          size="small"
          v-for="item in detail.symptom"
          :key="item.id"
          >{{ item.name }}</el-tag
        >
      </el-descriptions-item>
    </el-descriptions>
    <div style="margin: 48px 0" />
    <el-descriptions title="患者容量数据信息" :column="2">
      <el-descriptions-item label="干体质量">
        {{ detail.daily_health?.length > 0 ? detail.initial_dry_weight : '0' }} 斤
      </el-descriptions-item>
      <el-descriptions-item label="静息心率">
        {{ detail.daily_health?.length > 0 ? detail.initial_resting_heart_rate : '0' }}
      </el-descriptions-item>
      <el-descriptions-item label="监测天数">{{ watch_day }} 天</el-descriptions-item>
    </el-descriptions>
    <el-table :data="tableData" style="width: 100%" stripe border size="mini">
      <el-table-column label="监测时间" prop="created" width="180" align="center">
        <template slot-scope="scope">
          {{ new Date(scope.row.created).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="today_weight" label="体质量（斤）" align="center" />
      <el-table-column prop="today_resting_heart_rate" label="静息心率（次/分）" align="center" />
      <el-table-column prop="today_blood_pressure" label="血压（mmHg）" align="center" />
      <el-table-column prop="today_resting_heart_rate" label="静息心率（次/分）" align="center" />
      <el-table-column prop="today_shortness_of_breath" label="呼吸困难" align="center">
        <template slot-scope="scope">
          <div v-html="renderStatusColor(scope.row.today_shortness_of_breath)"></div>
        </template>
      </el-table-column>
      <el-table-column prop="today_fatigue" label="疲乏" align="center">
        <template slot-scope="scope">
          <div v-html="renderStatusColor(scope.row.today_fatigue)"></div>
        </template>
      </el-table-column>
      <el-table-column prop="today_inability_to_lie_flat" label="睡觉不能平卧" align="center">
        <template slot-scope="scope">
          <div v-html="renderStatusColor(scope.row.today_inability_to_lie_flat)"></div>
        </template>
      </el-table-column>
      <el-table-column prop="today_lower_limb_swelling" label="下肢水肿" align="center">
        <template slot-scope="scope">
          <div v-html="renderStatusColor(scope.row.today_lower_limb_swelling)"></div>
        </template>
      </el-table-column>

      <el-table-column prop="today_thirst" label="口渴" align="center">
        <template slot-scope="scope">
          <div v-html="renderStatusColor(scope.row.today_thirst)"></div>
        </template>
      </el-table-column>
      <el-table-column prop="today_abdominal_distension" label="腹胀" align="center">
        <template slot-scope="scope">
          <div v-html="renderStatusColor(scope.row.today_abdominal_distension)"></div>
        </template>
      </el-table-column>
      <el-table-column prop="today_poor_appetite" label="食欲不振" align="center">
        <template slot-scope="scope">
          <div v-html="renderStatusColor(scope.row.today_poor_appetite)"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <!-- 在这里可以根据需要定义操作按钮 -->
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="180" align="center" fixed="right">
        <template #default="scope">
          {{ scope.row.remarks }}
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="内容填写" :visible.sync="edit_dialog.visible" :close-on-click-modal="false">
      <el-form
        label-position="left"
        :model="edit_dialog.form"
        ref="editForm"
        label-width="180px"
        :rules="edit_dialog.rules"
        style="padding-right: 40px; max-height: 50vh; overflow: auto"
      >
        <el-form-item label="体质量(斤)" prop="today_weight">
          <el-input v-model="edit_dialog.form.today_weight"></el-input>
        </el-form-item>

        <el-form-item label="血压(mmHg)" prop="today_blood_pressure">
          <el-input v-model="edit_dialog.form.today_blood_pressure"></el-input>
        </el-form-item>

        <el-form-item label="静息心率（次/分）" prop="today_resting_heart_rate">
          <el-input v-model="edit_dialog.form.today_resting_heart_rate"></el-input>
        </el-form-item>

        <!-- 呼吸困难 -->
        <el-form-item label="呼吸困难" prop="today_shortness_of_breath">
          <el-radio-group v-model="edit_dialog.form.today_shortness_of_breath">
            <el-radio-button label="0">否</el-radio-button>
            <el-radio-button label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="疲乏" prop="today_fatigue">
          <el-radio-group v-model="edit_dialog.form.today_fatigue">
            <el-radio-button label="0">否</el-radio-button>
            <el-radio-button label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="睡觉不能平卧" prop="today_inability_to_lie_flat">
          <el-radio-group v-model="edit_dialog.form.today_inability_to_lie_flat">
            <el-radio-button label="0">否</el-radio-button>
            <el-radio-button label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="下肢水肿" prop="today_lower_limb_swelling">
          <el-radio-group v-model="edit_dialog.form.today_lower_limb_swelling">
            <el-radio-button label="0">否</el-radio-button>
            <el-radio-button label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="口渴" prop="today_thirst">
          <el-radio-group v-model="edit_dialog.form.today_thirst">
            <el-radio-button label="0">否</el-radio-button>
            <el-radio-button label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="腹胀" prop="today_abdominal_distension">
          <el-radio-group v-model="edit_dialog.form.today_abdominal_distension">
            <el-radio-button label="0">否</el-radio-button>
            <el-radio-button label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="食欲不振" prop="today_poor_appetite">
          <el-radio-group v-model="edit_dialog.form.today_poor_appetite">
            <el-radio-button label="0">否</el-radio-button>
            <el-radio-button label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="edit_dialog.form.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="edit_dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="editOnSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: {},
      tableData: [],
      edit_dialog: {
        visible: false,
        form: {
          today_weight: '',
          today_blood_pressure: '',
          today_resting_heart_rate: '',
          today_inability_to_lie_flat: '',
          today_shortness_of_breath: '', //呼吸困难的程度
          today_fatigue: '',
          today_lower_limb_swelling: '',
          today_thirst: '',
          today_abdominal_distension: '',
          today_poor_appetite: '',
          monitoring_time: '',
          remarks: '',
        },
      },
    };
  },
  methods: {
    renderStatusColor(status) {
      const color = status ? '#e52f10' : '#089c14'; // 0 1 为红色
      return `<div style="background-color: ${color}; width: 45px; height: 20px;margin:0 auto;box-shadow:0px 0px 2px 0px rgba(0,0,0,1)"></div>`;
    },
    async getDataRecords() {
      const { data, msg, code } = await this.$http.get('/api/user_info/' + this.$route.params.id);
      if (code) this.$message.error(msg);
      this.detail = data;
      this.tableData = data.daily_health;
    },
    async editOnSubmit() {
      const { code, msg, data } = await this.$http.post('/api/user/daily_health/', {
        user_id: this.$route.params.id,
        ...this.edit_dialog.form,
      });
      if (code) return this.$message.error(msg);

      this.edit_dialog.visible = false;
      await this.getDataRecords();
    },
    handleEdit(item) {
      this.edit_dialog.visible = true;
      // this.edit_dialog.form = item;
      Object.assign(this.edit_dialog.form, item);
    },
    async handleDelete(item) {
      this.deleteMessageBox({
        message: '是否确认删除？',
      }).then(async () => {
        const { code, msg } = await this.$http.delete('/api/user/daily_health?id=' + item.id);
        if (code) this.$message.error(msg);
        await this.getDataRecords();
      });
    },
  },
  computed: {
    watch_day() {
      return new Date(this.detail.created).getDate();
    },
  },
  async mounted() {
    await this.getDataRecords();
  },
};
</script>

<style lang="less" scoped>
::v-deep {
  .el-descriptions-item {
    padding-bottom: 24px !important;
  }
}
</style>
